<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    :before-close="handleClose"
    :width="width"
  >
    <div class="c-box">
      <slot name="content"> </slot>
    </div>
    <template #footer v-if="hasFooter">
      <span class="dialog-footer">
        <el-button @click="handleClose" type="info">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '30%'
  },
  hasFooter: {
    type: Boolean,
    default: true
  }
})
const emits = defineEmits(['update:visible', 'onCommit'])
const handleClose = () => {
  emits('update:visible', false)
}
const handleOk = () => {
  emits('onCommit')
}
</script>

<style lang="scss" scoped>
.c-box {
  :deep(.el-input) {
    --el-input-font-color: #333333;
    --el-input-border: 1px solid #999999;
    --el-input-border-color: #999999;
    --el-input-border-radius: 4px;
    --el-input-icon-color: #999999;
    --el-input-placeholder-color: #999999;
    --el-input-focus-border: #ff9502;
    font-size: 12px;
    line-height: 32px;
  }

  :deep(.el-form-item__label) {
    flex: 0 0 auto;
    text-align: right;
    font-size: 14px;
    color: #5d6c8e;
    padding: 0 12px 0 0;
    box-sizing: border-box;
  }

  :deep(.el-input__inner) {
    height: 32px;
    line-height: 32px;
    &:active {
      border: 1px solid #ff9502;
    }
  }
}
</style>
